import QtQuick 2.3
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1

ListView {
    id: listView

    clip: true

    property string character: "N"
    property bool drawable: true
    property bool editable: false
    property bool removable: false
    //default property alias data: container.data


    signal clicked()
    signal removeClicked()

    property Item toolBar

    property int iheight: 72 * factor

    Component {
        id: component

        Rectangle {
            width: listView.width
            height: iheight

            border.color: "lavender"

            color: "white"

            RowLayout {
                anchors.margins: 6 * factor
                anchors.fill: parent

                Canvas {
                    id: canvas

                    anchors.verticalCenter: parent.verticalCenter

                    anchors.left: parent.left

                    implicitWidth: drawable ? parent.height : 0
                    implicitHeight: drawable ? parent.height : 0

                    visible: drawable

                    onPaint: {
                        var context = canvas.getContext("2d")

                        context.beginPath();
                        var x = parent.height / 2 * factor
                        var y = parent.height / 2 * factor
                        var radius = parent.height / 2 - 6 * factor

                        context.arc(x, y, radius, 0, 2 * Math.PI, false);
                        context.fillStyle = 'white';
                        context.fill();
                        context.lineWidth = 1 * factor;
                        context.strokeStyle = 'cadetblue';
                        context.stroke();

                        context.font = parent.height / 3 * factor + 'pt sans-serif';
                        context.textAlign = "center"
                        context.textBaseline = 'middle';

                        context.fillStyle = 'black'

                        context.fillText(character, x, y)
                    }
                }


                Item {
                    id: container
                    Layout.fillWidth: true
                    Layout.fillHeight: true

                    anchors.verticalCenter: parent.verticalCenter
                }

                Image {
                    anchors.verticalCenter: parent.verticalCenter
                    source: if (editable)
                                "qrc:/application/image/it_edit.png"
                            else if (removable){
                                "qrc:/application/image/it_remove.png"
                            }
                            else {
                                "qrc:/application/image/it_next.png"
                            }
                }
            }

            MouseArea {
                anchors.fill: parent
                onClicked: root.clicked()
            }
        }
    }

    delegate: component
}

